<template>
  <view class="data-index fullpage-min bg-f5 body">
    <nav-bar title="数据台" hideBack>
      <view class="" slot="left" @click="openUserInfo">
        <u-icon style="margin-right: 5rpx" name="account-fill"></u-icon>
        我的
      </view>
    </nav-bar>
    <view class="p-20">
      <view class="p-10 borderRadius-20 bg-ff">
        <u-tabs
          :isScroll="false"
          :list="tabList"
          :current="current"
          @change="change"
        ></u-tabs>
      </view>
    </view>
    <!-- 金额数据看板 -->
    <view class="main" v-if="current == 0">
      <view class="view_item bg-ff borderRadius-20">
        <view class="title">金额成长数据</view>
        <view class="progress_circle">
          <view
            v-for="(item, index) in moneyData"
            :key="index"
            :class="['progress_block', 'block_' + index]"
          >
            <view class="name">{{ item.series[0].name }}</view>
            <view class="value">{{ item.series[0].value }}</view>
            <view class="charts-box arcbar" style="height: 180rpx; width: 60%">
              <qiun-data-charts
                type="arcbar"
                :chartData="item"
                :canvasId="'four_a_' + index"
                :canvas2d="isCanvas2d"
                :resshow="delayload"
                :opts="{
                  title: {
                    name: item.series[0].precent,
                    color: item.series[0].color,
                    fontSize: 15,
                  },
                  subtitle: { name: '', color: '#666666', fontSize: 12 },
                  extra: {
                    arcbar: { backgroundColor: item.series[0].backgroundColor },
                  },
                }"
              />
            </view>
            <view class="planet">
              <view class="planet_shadow"></view>
              <view class="crater1"></view>
              <view class="crater2"></view>
              <view class="crater3"></view>
              <view class="crater4"></view>
            </view>
            <view class="star" :class="['star' + index]"></view>
            <view class="star pink" :class="['star' + index]"></view>
            <view class="star blue" :class="['star' + index]"></view>
            <view class="star yellow" :class="['star' + index]"></view>
          </view>
        </view>
      </view>
      <u-gap height="20"></u-gap>
      <view class="row_block">
        <view class="the_title" style="justify-content: space-between">
          <view class="left_title">
            <view class="title_icon"></view>
            <text class="margin_stand-samll font-big wide">日收益明细</text>
          </view>
          <view class="right_btn">
            <view
              v-for="(item, index) in historyBtn"
              :key="index"
              :class="item.state ? 'active_btn' : ''"
              @click="changeHistoryBtn(item.type)"
              >{{ item.name }}</view
            >
          </view>
        </view>
        <view class="charts-box" style="height: 200px">
          <qiun-data-charts
            type="line"
            canvasId="school_c"
            :canvas2d="isCanvas2d"
            :resshow="delayload"
            :ontouch="true"
            :opts="{
              enableScroll: true,
              xAxis: { scrollShow: true, itemCount: 4, disableGrid: true },
              series: { style: 'curve' },
            }"
            :chartData="amountData"
          />
        </view>
      </view>
    </view>
    <!-- 商品数据看板 -->
    <view class="main" v-if="current == 1">
      <text-block :content="goodsData"></text-block>
      <u-gap height="40"></u-gap>
      <view class="row_block">
        <view class="the_title" style="justify-content: space-between">
          <view class="left_title">
            <view class="title_icon"></view>
            <text class="margin_stand-samll font-big wide">商品销量统计</text>
          </view>
          <view class="right_btn">
            <view
              v-for="(item, index) in historyBtn"
              :key="index"
              :class="item.state ? 'active_btn' : ''"
              @click="changeHistoryBtn(item.type)"
              >{{ item.name }}</view
            >
          </view>
        </view>
        <view class="charts-box" style="height: 200px">
          <qiun-data-charts
            type="mix"
            :chartData="goods_sales"
            :reshow="delayload"
            :canvas2d="true"
            canvasId="two_d"
            :ontouch="true"
            :opts="{
              yAxis: { data: [{ title: '' }] },
              xAxis: { scrollShow: true, itemCount: 4, disableGrid: true },
              enableScroll: true,
              series: { style: 'curve' },
            }"
          />
        </view>
      </view>
    </view>
    <!-- 订单数据看板 -->
    <view class="main" v-if="current == 2">
      <text-block :content="orderCountData"></text-block>
      <u-gap height="40"></u-gap>
      <view class="row_block">
        <view class="the_title" style="justify-content: space-between">
          <view class="left_title">
            <view class="title_icon"></view>
            <text class="margin_stand-samll font-big wide">订单总数统计</text>
          </view>
          <view class="right_btn">
            <view
              v-for="(item, index) in historyBtn"
              :key="index"
              :class="item.state ? 'active_btn' : ''"
              @click="changeHistoryBtn(item.type)"
              >{{ item.name }}</view
            >
          </view>
        </view>
        <view class="charts-box" style="height: 200px">
          <qiun-data-charts
            type="line"
            canvasId="finance_a"
            :canvas2d="isCanvas2d"
            :resshow="delayload"
            :opts="{
              xAxis: { itemCount: 12, disableGrid: true },
              yAxis: { disableGrid: true, data: [{ disabled: true }] },
            }"
            :chartData="orderData"
          />
        </view>
      </view>
    </view>
    <!-- 用户数据看板 -->
    <view class="main" v-if="current == 3">
      <view class="row_block">
        <view class="left_title">
          <view class="title_icon"></view>
          <text class="margin_stand-samll font-big wide">用户概况</text>
        </view>
        <view style="display: flex; justify-content: space-between">
          <view
            v-for="(item, index) in userData"
            class="charts-box"
            style="height: 130px; width: 45%"
          >
            <qiun-data-charts
              type="arcbar"
              :chartData="item"
              :canvasId="'two_c_' + index"
              :canvas2d="true"
              :reshow="delayload"
              :opts="{
                title: {
                  name: item.series[0].data * 100 + '%',
                  color: item.series[0].color,
                  fontSize: 25,
                },
                subtitle: {
                  name: item.series[0].name,
                  color: '#666666',
                  fontSize: 12,
                },
              }"
            />
          </view>
        </view>
      </view>
      <view class="row_block">
        <view class="the_title" style="justify-content: space-between">
          <view class="left_title">
            <view class="title_icon"></view>
            <text class="margin_stand-samll font-big wide">访问用户统计</text>
          </view>
          <view class="right_btn">
            <view
              v-for="(item, index) in historyBtn"
              :key="index"
              :class="item.state ? 'active_btn' : ''"
              @click="changeHistoryBtn(item.type)"
              >{{ item.name }}</view
            >
          </view>
        </view>
        <view class="charts-box" style="height: 200px">
          <qiun-data-charts
            type="line"
            canvasId="finance_a"
            :canvas2d="isCanvas2d"
            :resshow="delayload"
            :opts="{
              xAxis: { itemCount: 12, disableGrid: true },
              yAxis: { disableGrid: true, data: [{ disabled: true }] },
            }"
            :chartData="historyData"
          />
        </view>
      </view>
    </view>
    <u-popup v-model="isShow" width="400">
      <view class="user_info">
        <view class="headimage text-center">
          <image
            src="../../static/default-avatar.jpg"
            style="width: 140rpx; height: 140rpx; border-radius: 50%"
            mode=""
          ></image>
          <view class="size-32 m-top-10 color-6"> 张先生(董事) </view>
        </view>
      </view>
      <u-gap height="50"></u-gap>
      <view
        class="lump flex-row p-left-20 p-right-20 p-botoom-20 color-6 border-bottom m-botoom-20"
        @click="showShopSelect = true"
      >
        <view>所在门店：</view>
        <view class="flex-2">湖美店</view>
        <u-icon color="#999" name="arrow-right"></u-icon>
      </view>
      <view
        class="lump flex-row p-left-20 p-right-20 p-botoom-20 color-6 border-bottom m-botoom-20"
        @click="clickBtn(1)"
      >
        <view class="flex-2">门店资料：</view>
        <u-icon color="#999" name="arrow-right"></u-icon>
      </view>
      <view
        class="lump flex-row p-left-20 p-right-20 p-botoom-20 color-6 border-bottom m-botoom-20"
        @click="clickBtn(2)"
      >
        <view class="flex-2">店铺公告：</view>
        <u-icon color="#999" name="arrow-right"></u-icon>
      </view>
      <view
        class="lump flex-row p-left-20 p-right-20 p-botoom-20 color-6 border-bottom m-botoom-20"
        @click="clickBtn(3)"
      >
        <view class="flex-2">通讯联系：</view>
        <u-icon color="#999" name="arrow-right"></u-icon>
      </view>
      <view
        class="lump flex-row p-left-20 p-right-20 p-botoom-20 color-6 border-bottom m-botoom-20"
        @click="clickBtn(4)"
      >
        <view class="flex-2">查看监控：</view>
        <u-icon color="#999" name="arrow-right"></u-icon>
      </view>
      <view
        class="lump flex-row p-left-20 p-right-20 p-botoom-20 color-6 border-bottom m-botoom-20"
        @click="clickBtn(5)"
      >
        <view class="flex-2">总部通知：</view>
        <view class="flex-row ai-center">
          <view style="color: #f82727"> 3 </view>
          <u-icon color="#999" name="arrow-right"></u-icon>
        </view>
      </view>
      <view
        class="lump flex-row p-left-20 p-right-20 p-botoom-20 color-6 border-bottom m-botoom-20"
        @click="clickBtn(6)"
      >
        <view class="flex-2">门店须知：</view>
        <u-icon color="#999" name="arrow-right"></u-icon>
      </view>
      <view
        class="pos-absolute"
        style="bottom: 30rpx; left: 20rpx; right: 20rpx"
      >
        <g-button size="large" round type="primary" @click="loginOut"
          >退出登陆</g-button
        >
      </view>
    </u-popup>
    <u-select v-model="showShopSelect" :list="list"></u-select>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      tabList: [
        {
          name: "金额",
          value: 1,
        },
        {
          name: "商品",
          value: 1,
        },
        {
          name: "订单",
          value: 1,
        },
        {
          name: "用户",
          value: 1,
        },
      ],
      isCanvas2d: this.$f.ISCANVAS2D,
      historyBtn: [
        {
          name: "本周",
          state: 1,
          type: "expend",
        },
        {
          name: "上周",
          state: 0,
          type: "income",
        },
      ],
      historyData: this.simulated.historyData,
      amountData: this.simulated.amountData,
      goods_sales: this.simulated.goods_sales,
      orderData: this.simulated.orderData,
      moneyData: this.simulated.moneyData,
      userData: this.simulated.userData,
      orderCountData: this.simulated.orderCountData,
      goodsData: this.simulated.goodsData,
      delayload: false,
      isShow: false,
      showShopSelect: false,
      list: [
        {
          value: "1",
          label: "桥南店",
        },
        {
          value: "2",
          label: "湖美店",
        },
        {
          value: "2",
          label: "胡玫店",
        },
      ],
    };
  },
  methods: {
    change(e) {
      this.current = e;
    },
    openUserInfo() {
      this.isShow = true;
    },
    clickBtn(e) {
      let url = "/pagesUser/user/";
      switch (e) {
        case 1:
          url = url + "shop-data?id=" + 1;
          break;
        case 2:
          url = url + "shop-notices?id=" + 1;
          break;
        case 3:
          url = url + "staff-list?id=" + 1;
          break;
        case 4:
          url = url + "monitoring-list?id=" + 1;
          break;
        case 5:
          url = url + "headquarters-notices?id=" + 1;
          break;
        case 6:
          url = url + "shop-information?id=" + 1;
          break;
        default:
          break;
      }
      this.$f.jumpUrl(url);
    },
    loginOut() {
      //跳转
      uni.redirectTo({
        url: "/pages/login/index",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.body {
  height: 100%;
  background-color: $color-theme;
  margin: 0;
  padding-bottom: 20rpx;

  .main {
    width: 100%;
    padding: 0 20rpx;
    box-sizing: border-box;
    margin-top: 20rpx;

    .right_btn {
      float: right;
      display: flex;
      color: #ccc;
      font-size: 22rpx;

      view {
        line-height: 50rpx;
        height: 50rpx;
        margin: 0 20rpx;
      }

      .active_btn {
        padding: 0rpx 20rpx;
        border: 1px solid #ccc;
        border-radius: 40rpx;
      }
    }

    .row_block {
      width: 100%;
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 12rpx;
      position: relative;
      padding: 20rpx;

      &::after {
        content: "";
        height: 0px;
        width: 92%;
        position: absolute;
        transform: translateX(-50%);
        left: 50%;
        bottom: 0;
        border-top: 1px dashed #ccc;
      }
    }

    .the_title {
      display: flex;
      align-items: center;

      .left_title {
        display: flex;
        align-items: center;
      }

      .title_icon {
        background-color: #7e7e7e;
        height: 40rpx;
        width: 10rpx;
        border-radius: 10rpx;
        margin-right: 20rpx;
        font-size: 16px;
        font-weight: 600;
      }
    }

    .view_item {
      padding: 30rpx 20rpx;

      .title {
        text-align: left;
        margin-bottom: 30rpx;
        font-size: 40rpx;
      }
    }

    .progress_circle {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: center;
      height: 450rpx;

      .progress_block {
        width: 45%;
        border-radius: 20rpx;
        height: 180rpx;
        position: relative;
        overflow: hidden;

        .name {
          color: #fff;
          font-size: 24rpx;
          position: absolute;
          top: 20rpx;
          left: 10rpx;
          max-width: 144rpx;
        }

        .value {
          color: #fff;
          font-size: 40rpx;
          position: absolute;
          top: 64rpx;
          left: 10rpx;
          max-width: 144rpx;
        }

        .circle {
          position: absolute;
          right: 8rpx;
          top: 16rpx;
        }

        .arcbar {
          position: absolute;
          right: -4rpx;
          top: 8rpx;
        }
      }

      .block_0 {
        background-color: #0fc3ff;
      }

      .block_1 {
        background-color: #ff6b8b;
      }

      .block_2 {
        background-color: #ffcb1d;
      }

      .block_3 {
        background-color: #3bdcaa;
      }
    }
  }
}

.user_info {
  padding: 80px 0rpx 40rpx 0;
}
</style>
